<template lang="html">
  <div v-loading="loading" class="order-panel">
    <el-button type="primary" @click="refundDialog('post')">添加</el-button>
    <el-dialog v-loading="loading" title="编辑" :visible.sync="refundDiaIsShow" class="diaForm" :append-to-body="false">
      <el-form
        ref="refundRef"
        :model="refundForm"
        :rules="refundRules"
        label-width="140px"
      >
        <el-form-item label="车牌号" prop="plate_number">
          <el-col :span="15">
            <el-input
              v-model="refundForm.plate_number"
              type="text"
              placeholder="请输入车牌号"
            />
          </el-col>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            @click="editRefund()"
          >确认
          </el-button>
          <el-button @click="refundDiaIsShow = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-table
      :data="refundTableData"
      border
      style="width: 100%"
    >
      <el-table-column
        label="会员信息"
        width="200"
      >
        <template slot-scope="scope">
          <el-row>
            <el-col :span="24">
              上级昵称:
            </el-col>
            <el-col :span="24">
              上级手机:
            </el-col>
            <el-col :span="24">
              会员昵称: {{ scope.row.userInfo.nickname }}
            </el-col>
            <el-col :span="24">
              会员手机: {{ scope.row.userInfo.mobile_number }}
            </el-col>
          </el-row>
        </template>
      </el-table-column>
      <el-table-column
        label="订单信息"
        width="300"
      >
        <template slot-scope="scope">
          <el-row>
            <el-col :span="24">
              付款金额：￥{{ scope.row.orderInfo.price_pay }}
            </el-col>
            <el-col :span="24">
              总金额：￥{{ scope.row.orderInfo.price_total }}
            </el-col>
            <el-col :span="24">
              优惠总金额：￥{{ scope.row.orderInfo.price_discount }}
            </el-col>
            <el-col :span="24">
              优惠说明：
              <span v-for="(item) in  scope.row.price_discount_desc ">
                <span v-for="key in Object.keys(item)">
                  {{key + ':' + item[key]}}
                </span>
              </span>
            </el-col>
            <el-col :span="24">
              状态：
              <el-tag type="danger" size="mini">{{ scope.row.orderInfo.extend_status_text }}</el-tag>
            </el-col>
            <el-col :span="24">
              单号：{{ scope.row.orderInfo.nb }}
            </el-col>
            <el-col :span="24">
              描述：{{ scope.row.orderInfo.remark }}
            </el-col>
            <el-col :span="24">
              下单时间：{{ scope.row.orderInfo.create_time }}
            </el-col>
          </el-row>
        </template>
      </el-table-column>
      <el-table-column
        label="支付信息"
        width="220"
      >
        <template slot-scope="scope">
          <el-row>
            <el-col v-if="scope.row.orderInfo.pay_type" :span="24">
              收款类型：{{ scope.row.orderInfo.pay_type }}
            </el-col>
            <el-col v-if="scope.row.orderInfo.price" :span="24">
              支付金额：￥{{ scope.row.orderInfo.price }}
            </el-col>
            <el-col :span="24">
              支付单号：{{ scope.row.orderInfo.pay_nb }}
            </el-col>
            <el-col :span="24">
              支付时间：{{ scope.row.orderInfo.pay_time }}
            </el-col>
          </el-row>
        </template>
      </el-table-column>
      <el-table-column
        label="收货信息"
        width="220"
      >
        <template slot-scope="scope">
          <el-row>
            <el-col :span="24">
              收货信息：{{ scope.row.orderInfo.receiver_name }}{{ scope.row.orderInfo.receiver_mobile_number }}
            </el-col>
            <el-col :span="24">
              收货地址：{{ scope.row.orderInfo.receiver_address }}
            </el-col>
          </el-row>
        </template>
      </el-table-column>
      <el-table-column
        label="退货的规格信息"
        width="230"
      >
        <template slot-scope="scope">
          <el-row>
            <el-col :span="24">
              <el-col :span="24">
                <img :src="scope.row.orderInfo.product_logo_url" alt="" width="100">
              </el-col>
              <el-col :span="24">
                {{ scope.row.orderInfo.product_name }}
              </el-col>
              <el-col :span="24">
                规格:{{ scope.row.orderListInfo.product_sku_name }} x {{ scope.row.orderListInfo.count_total }}
              </el-col>
            </el-col>
          </el-row>
          <div style="border: 1px solid #00ff80;margin-bottom: 5px;padding:2px">
            <el-row>
              <el-col :span="24">
                规格：{{ scope.row.orderListInfo.product_sku_name }}
              </el-col>
              <el-col v-if="scope.row.orderListInfo.packageCompanyInfo" :span="24">
                快递公司：{{ scope.row.orderListInfo.packageCompanyInfo.name }}
              </el-col>
              <el-col v-if="scope.row.orderListInfo.package_nb" :span="24">
                快递单号：{{ scope.row.orderListInfo.package_nb }}
                <el-tag size="small" type="success">已发货</el-tag>
              </el-col>
              <el-col :span="24">
                快递费用：
                <span
                  v-if="scope.row.orderListInfo.price_package === '0' || scope.row.orderListInfo.price_package === '0.00'">包邮</span>
                <span v-else>{{scope.row.orderListInfo.price_package}}</span>
              </el-col>
              <el-col v-if="scope.row.orderListInfo.package_fh_time" :span="24">
                发货时间：{{ scope.row.orderListInfo.package_fh_time }}
              </el-col>
            </el-row>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        label="退货信息"
        width="220"
      >
        <template slot-scope="scope">
          <el-row>
            <el-col :span="24">
              签收状态:{{ scope.row.qs_status }}
            </el-col>
            <el-col :span="24">
              <el-tag type="success" size="mini">{{ scope.row.tk_type }}</el-tag>
            </el-col>
            <el-col :span="24">
              退货原因:{{ scope.row.reason }}
            </el-col>
            <el-col :span="24">
              退货原因描述:{{ scope.row.reason_desc }}
            </el-col>
            <el-col v-if="scope.row.reason_desc_img_url.length>0" :span="24">
              退货原因描述图:
            </el-col>
            <el-col v-if="scope.row.reason_desc_img_url.length>0" :span="24">
              <img v-for="item in scope.row.reason_desc_img_url" :src="item" alt="" style="width: 30px;height: 30px">
            </el-col>
            <el-col :span="24">
              退款金额:{{ scope.row.refund_fee }}
            </el-col>
            <el-col :span="24">
              <el-tag type="danger" size="mini">{{ scope.row.extend_status_text }}</el-tag>
            </el-col>
            <el-col v-if="scope.row.extend_status_text === '已退款'" :span="24">
              同意时间:{{ scope.row.approve_time }}
            </el-col>
            <el-col v-if="scope.row.extend_status_text === '已拒绝退款'" :span="24">
              拒绝时间:{{ scope.row.refuse_time }}
            </el-col>
          </el-row>
        </template>
      </el-table-column>
      <el-table-column
        label="退款信息"
        width="330"
      >
        <template slot-scope="scope">
          <el-row v-if="scope.row.extend_status_text === '已退款'">
            <el-col :span="24">
              退货单号:{{ scope.row.refund_no }}
            </el-col>
            <el-col :span="24">
              微信退货单号:{{ scope.row.refund_id }}
            </el-col>
            <el-col :span="24">
              退货状态描述:{{ scope.row.refund_status }}
            </el-col>
            <el-col :span="24">
              订单金额:{{ scope.row.refund_total_fee }}
            </el-col>
            <el-col :span="24">
              申请退款金额:{{ scope.row.refund_fee }}
            </el-col>
            <el-col :span="24">
              同意时间:{{ scope.row.refund_settlement_refund_fee }}
            </el-col>
            <el-col :span="24">
              退款成功时间:{{ scope.row.refund_success_time }}
            </el-col>
            <el-col :span="24">
              退款发起来源:{{ scope.row.refund_request_source }}
            </el-col>
          </el-row>
        </template>
      </el-table-column>
      <el-table-column
        fixed="right"
        label="操作"
        align="center"
        width="100"
      >
        <template slot-scope="scope">
          <!-- scope.row.tk_type退款类型：1退款；2退货退款-->
          <el-row>
            <el-col :span="24">
              <el-button v-if="scope.row.extend_status_text !=='已退款' && scope.row.extend_status_text === '申请退款中'"
                         type="text" size="small"
                         @click="refundDialog('refundApprove',scope.row)">同意退款
              </el-button>
            </el-col>
            <el-col :span="24">
              <el-button v-if="scope.row.extend_status_text !=='已退款' && scope.row.extend_status_text === '申请退款中'"
                         type="text" size="small"
                         @click="refundDialog('refundRefuse',scope.row)">拒绝退款
              </el-button>
            </el-col>
            <el-col :span="24">
              <el-button v-if="scope.row.extend_status_text ==='待卖家签收并验货'" type="text" size="small"
                         @click="refundDialog('refundShouHuo',scope.row)">确认收货
              </el-button>
            </el-col>
            <el-col :span="24">
              <el-button v-if="scope.row.extend_status_text ==='卖家已签收待验货'" type="text" size="small"
                         @click="refundDialog('refundYanHuoTrue',scope.row)">验货完毕，确认打款
              </el-button>
              <el-button v-if="scope.row.extend_status_text ==='卖家已签收待验货'" type="text" size="small"
                         @click="refundDialog('refundYanHuoFalse',scope.row)">验货失败，拒绝打款
              </el-button>
            </el-col>
          </el-row>

        </template>
      </el-table-column>
    </el-table>
    <div style="text-align:center;margin-top:20px">
      <el-pagination
        :current-page="refundTableDataPaginateCurrentPage"
        :page-sizes="refundTableDataPaginateTotalPageSizes"
        :page-size="refundTableDataPaginateTotalPageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="refundTableDataPaginateTotal"
        @size-change="refundTableDataHandleSizeChange"
        @current-change="refundTableDataHandleCurrentChange"
      >
        <!-- <span>当前{{ refundTableDataPaginateCurrentPage }}页，</span>
                        <span>共{{ refundTableDataPaginateLastPage }}页</span> -->
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loading: false,
      refundSearchForm: {},
      refundTableData: [],
      refundTableDataPaginateCurrentPage: 1,
      refundTableDataPaginateTotal: 1,
      refundTableDataPaginateLastPage: 1,
      refundTableDataPaginateTotalPageSize: 10,
      refundTableDataPaginateTotalPageSizes: [10, 20, 50, 100],
      refundTab: [],
      refundEditType: 'post',
      refundDiaIsShow: false,
      refundForm: {},
      refundRules: {
        mobile_number: [{
          required: true,
          trigger: 'blur'
        }],
        password: [{
          required: true,
          trigger: 'blur'
        }]
      }
    }
  },
  created() {
    this.getRefundList()
  },
  methods: {
    refundTableDataHandleSizeChange(val) {
      // 改变每页显示的条数
      this.refundTableDataPaginateTotalPageSize = val
      this.getRefundList(1, this.refundTableDataPaginateTotalPageSize)
    },
    refundTableDataHandleCurrentChange(val) {
      this.refundTableDataPaginateCurrentPage = val
      this.getRefundList(val, this.refundTableDataPaginateTotalPageSize)
    },
    getRefundList(page = 1, limit = 10) {
      this.loading = true
      this.refundSearchForm.page = page
      this.refundSearchForm.limit = limit
      this.$store.dispatch('order/getRefundList', this.refundSearchForm).then((res) => {
        this.refundTableData = res.data.data
        this.refundTableDataPaginateTotal = res.data.total
        this.refundTableDataPaginateCurrentPage = res.data.current_page
        this.refundTableDataPaginateLastPage = res.data.last_page
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    },
    deleteRefund(row) {
      // console.log(row)
      this.$confirm('确认删除吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.loading = true
          this.$store.dispatch('order/deleteRefund', { id: row.id }).then((res) => {
            this.getRefundList()
            this.loading = false
            this.refundDiaIsShow = false
            this.$message({
              type: 'success',
              message: res.msg
            })
          }).catch(() => {
            // this.loading = false
            return false
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    editRefund() {
      switch (this.refundEditType) {
        case 'post':
          this.$refs['refundRef'].validate((valid) => {
            if (valid) {
              this.loading = true
              this.$store.dispatch('refund/postRefund', this.refundForm).then((res) => {
                this.getRefundList()
                this.refundForm = {}
                this.loading = false
                this.refundDiaIsShow = false
                this.$message({
                  type: 'success',
                  message: res.msg
                })
              }).catch(() => {
                this.loading = false
              })
            } else {
              return false
            }
          })
          break
        case 'put':
          this.$refs['refundRef'].validate((valid) => {
            if (valid) {
              this.loading = true
              this.$store.dispatch('refund/putRefund', this.refundForm).then((res) => {
                this.getRefundList()
                this.refundForm = {}
                this.loading = false
                this.refundDiaIsShow = false
                this.$message({
                  type: 'success',
                  message: res.msg
                })
              }).catch(() => {
                this.loading = false
              })
            } else {
              return false
            }
          })
          break
      }
    },
    refundDialog(type, row) {
      switch (type) {
        case 'post':
          this.refundDiaIsShow = true
          this.refundEditType = 'post'
          break
        case 'put':
          this.refundDiaIsShow = true
          this.refundEditType = 'put'
          // 这里一定要使用nextTick的方式赋值，不然会卡住input
          this.$nextTick(() => {
            //   this.$set(this.refundForm, 'id', row.id)
          })
          break
        case 'refundApprove':
          this.loading = true
          console.log(row)
          var data = {}
          data.refund_id = row.id
          this.$store.dispatch('order/putRefundApprove', data).then((res) => {
            this.getRefundList()
            this.refundForm = {}
            this.$message({
              type: 'success',
              message: res.msg
            })
          }).catch(() => {
            this.loading = false
          })
          break
        case 'refundRefuse':
          this.loading = true
          console.log(row)
          var data = {}
          data.refund_id = row.id
          this.$store.dispatch('order/putRefundRefuse', data).then((res) => {
            this.getRefundList()
            this.refundForm = {}
            this.$message({
              type: 'success',
              message: res.msg
            })
          }).catch(() => {
            this.loading = false
          })
          break
        case 'refundShouHuo':
          this.loading = true
          console.log(row)
          var data = {}
          data.refund_id = row.id
          this.$store.dispatch('order/putRefundShouHuo', data).then((res) => {
            this.getRefundList()
            this.refundForm = {}
            this.$message({
              type: 'success',
              message: res.msg
            })
          }).catch(() => {
            this.loading = false
          })
          break
        case 'refundYanHuoTrue':
          this.loading = true
          console.log(row)
          var data = {}
          data.refund_id = row.id
          data.yanhuo_status = true
          this.$store.dispatch('order/putRefundYanhuo', data).then((res) => {
            this.getRefundList()
            this.refundForm = {}
            this.$message({
              type: 'success',
              message: res.msg
            })
          }).catch(() => {
            this.loading = false
          })
          break
        case 'refundYanHuoFalse':
          this.loading = true
          console.log(row)
          var data = {}
          data.refund_id = row.id
          data.yanhuo_status = false
          this.$store.dispatch('order/putRefundYanhuo', data).then((res) => {
            this.getRefundList()
            this.refundForm = {}
            this.$message({
              type: 'success',
              message: res.msg
            })
          }).catch(() => {
            this.loading = false
          })
          break
        default:
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.order-panel {
  padding: 18px;
  font-size: 10px;
}
</style>
